<template>
	<view class="page">
		<view class="h30"></view>
		<view v-show="preStart">
			<view class="block">
				<div class="test-name">{{testObj.title}}</div>
				<div class="info-title">测评说明</div>
				<div class="info-content">{{testObj.des}}</div>
				<div class="info-title">注意事项</div>
				<div class="info-item">· 题目共{{testObj.item.length||''}}道，请在30分钟内完成作答。</div>
				<div class="info-item">· 答案无对错之分，不用过度思考，根据第一反应. 选择即可。</div>
				<div class="info-item">· 答题完成后，将可获得评估报告及相应建议，您也可以前往【我的】-【服务记录】中找到历史测评结果。</div>
				<div class="info-item">· 该测评结果仅供参考，不能以此作相关诊断。如有疑问，请咨询专业人员。</div>
			</view>
			<view class="btn btn-end">
				<u-button type="primary" @click="start" text="开始测评"></u-button>
			</view>
		</view>
		<view v-show="!preStart">
			<view class="flex-SB q-head">
				<view @click="fastChange">{{qIndex>8?'':'0'}}{{qIndex+1}}/{{testObj.item.length>8?'':'0'}}{{testObj.item.length||''}}题</view>
				<!-- <view>{{qIndex>8?'':'0'}}{{qIndex+1}}/{{testObj.item.length>8?'':'0'}}{{testObj.item.length||''}}题</view> -->
				<view style="width: 400rpx;background-color: #ccc;height: 12rpx;border-radius: 6rpx;overflow: hidden;">
						<view class="preBar" :style="{width:(qIndex+1)/testObj.item.length*400+'rpx'}"></view>
				</view>
				<u-count-down @finish="timeEnd" ref="countDown" :auto-start="true" :time="30 * 60 * 1000" format="mm:ss"></u-count-down>
				<image style="width: 32rpx;height: 32rpx;" src="@/static/images/time_ico.png"></image>
			</view>
			<view class="q-head">
				<view class="title" style="display: flex;">
					<view style="min-width: 96rpx;height: 42rpx;border-radius: 0rpx 20rpx 0rpx 20rpx;background: #326eff;margin-right: 20rpx;font-size: 24rpx;color: #fff;line-height: 42rpx;text-align: center;margin-top: 10px;">单选题</view>
					<view>{{qlist[qIndex].question}}</view>
				</view>
				
			</view>
				<radio-group @change="radioChange">
					<view class="block">
					<label v-for="(item,i) in qlist[qIndex].level" class="flex-SB qitem" :class="{qitemAc:qlist[qIndex].ans==qlist[qIndex].level[i].content||i===indexAc}">
						<view>{{optionText[i]}}.{{item.content}}</view>
						<radio color="#326eff" :value="i" :checked="qlist[qIndex].ans==item.content" />
					</label>
					</view>
				</radio-group>
			<view class="block flex-center" style="position: absolute;bottom: 50rpx;left: 12rpx;text-align: center;">
				<view @tap="qreqs" v-show="qIndex>=1" class="btnWrap" style="color: #326eff;border: 1px solid #326eff;margin-right: 10rpx;">上一题</view>
				<view @tap="nextqs"  v-show="qIndex+1<qlist.length" class="btnWrap" style="background-color: #326eff;color: #fff;margin-left: 10rpx;">下一题</view>
				<view @tap="submitTest" v-show="qIndex+1>=qlist.length" class="btnWrap" style="background-color: #326eff;color: #fff;margin-left: 10rpx;">提交</view>
			</view>
		</view>

		<u-modal :show="endTimeModel" :showCancelButton="true" @confirm="answer('endTimeModel')" @cancel="requestion"  :title="'时间到了'" confirmText='继续答题' cancelText='重新作答' content='您未在规定时间内完成作答，为保证作答质量，请点击【重新作答】从第一题开始答题。'></u-modal>
		<u-modal :show="outModel" :showCancelButton="true" @confirm="answer('outModel')" @cancel="toBack"  :title="'退出将无法保存'" confirmText='继续测评' cancelText='退出' content='中途退出后，测评记录无法保存，建议您完成测评'></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				id:'',
				outModel:false,
				endTimeModel:false,
				indexAc:'',
				qIndex:0,
				preStart: true,
				value: '',
				qlist:[],
				testObj: {
					item:[]
				},
				questions:{
					question:'',
					level:[]
				},
				evaluate:[],
				optionText:['A','B','C','D','E','F','G','H','I'],
				testName:'',
				answerData:[]
			}
		},
		onLoad(opt) {
			this.id=opt.id
			console.log(this.id);
			this.init(opt.id)
		},
		methods: {
			fastChange(event){
				let kindex = 3;
				this.indexAc = kindex;
				
				this.answerData.forEach((item,index)=>{
					
					this.qIndex = index;
					console.log(index);
					this.qlist[index].ans = this.qlist[index].level[kindex].content;
					this.qlist[index].score = this.qlist[index].level[kindex].score;
					let {id,ans,score} = this.qlist[index];
					if(item.question_id==id){
					    if (item.option.length == 0) {
					        item.option.push(ans);
					    } else {
					        item.option = [];
					        item.option.push(ans)
					    }    
					    if (item.option_score.length == 0) {
					        item.option_score.push(score);
					    } else {
					        item.option_score = [];
					        item.option_score.push(score)
					    }                 
					}
				})
			},
			
			submitTest(){
				// let score = 0;
				// this.qlist.forEach(item=>{
				// 	score+=Number(item.score);
				// })
				// console.log(score);
				// let dimensionData = {};
				// this.evaluate.forEach(t=>{
				//     let start=t.score[0];
				//     let end=t.score[1];
				// 	if(score>=start&&score<=end){
				// 		dimensionData.score=t.score;
				// 		dimensionData.tag=t.tag;
				// 		dimensionData.describe=t.describe;
				// 		dimensionData.evaluate=t.evaluate;
				// 		dimensionData.explain=t.explain;
				// 		dimensionData.suggest=t.suggest;
				// 	}
				// })
				// console.log(dimensionData);
				// let date=new Date();
				// let time=parseInt(date.getTime()/1000)
				
				// if(this.answerData[this.testNum].option.length==0){
				//     return this.$toast('请完成本题')
				// }
				//算维度
				let dimensionAll=this.evaluate;
				let dimensionTag=[];
				let dimensionData=[];
				this.answerData.forEach(item=>{
				    item.options_dimension.forEach(t=>{
				        if(dimensionTag.indexOf(t)==-1){
				            dimensionTag.push(t)
				        }
				    })
				})
				dimensionTag.forEach(item=>{
				    dimensionData.push({dem:item,src:0,score:'',tag:'',describe:'',evaluate:'',explain:'',suggest:''})
				})
				this.answerData.forEach(item=>{
				    item.option_score.forEach(t=>{
				        if(t!=-1){
				            item.options_dimension.forEach(q=>{
				                if(dimensionTag.indexOf(q)!=-1){
				                    dimensionData.forEach(a=>{
				                        if(a.dem==q){
				                            a.src+=Number(t);
				                        }
				                    })
				                }
				            })
				        }
				    })
				})
				dimensionData.forEach(item=>{
				    dimensionAll.forEach(t=>{
				        let start=t.score[0];
				        let end=t.score[1];
				        if(item.dem==t.dimension){
				            if(item.src>=start&&item.src<=end){
				                item.score=t.score;
				                item.tag=t.tag;
				                item.describe=t.describe;
				                item.evaluate=t.evaluate;
				                item.explain=t.explain;
				                item.suggest=t.suggest;
				            }
				        }
				    })
				})
				let date=new Date();
				let time=parseInt(date.getTime()/1000)
				let ansStr=JSON.stringify(this.answerData)
				let dimensionStr=JSON.stringify(dimensionData)
				let evaluate=JSON.stringify(this.evaluate)
				
				uni.$u.http.post('/client/add_test', {
					ans: ansStr,
					dem_src: dimensionStr,
					end_time: time,
					imei:this.member.imei,
					phone:this.member.phone,
					name:this.testObj.title,
					type:'test',
					evaluate:JSON.stringify(this.evaluate)
				}).then(res => {
					if(res.status==200){
						let id = res.data.testData[0].id;
					    // if(this.testName=='大五人格' || this.testName == "大五人格量表 FFI"  || this.testName == "心理韧性测评"){
						if([92,120,122].includes(parseInt(this.id))){
					        uni.redirectTo({
					        	url:'/pagesA/pages/testMain/testReportA?id='+id
					        })
					    }else{
					        uni.redirectTo({
					        	url:'/pagesA/pages/testMain/testReportB?id='+id
					        })
					    }
					}
				});
				
			},
			toBack(){
				this.outModel = false;
				uni.reLaunch({
					url:'/pagesA/pages/index/service'
				})
			},
			answer(field){
				this[field] = false;
			},
			requestion(){
				this.endTimeModel = false;
				this.indexAc='';
				this.qIndex=0;
				this.init(this.id)
			},
			init(){
				uni.$u.http.post('/client/test_item', {
					id: this.id
				}).then(res => {
					if (res.status == 200 && res.data.test.length) {
						this.testObj = JSON.parse(res.data.test[0].test_content);
						// this.questions = this.testObj.item[0]
						this.qlist = this.testObj.item
						// this.evaluate=JSON.parse(res.data.test[0].evaluate)
						
						let test=JSON.parse(res.data.test[0].test_content)
						let evaluate=JSON.parse(res.data.test[0].evaluate)
						let testName=test.title
						let des=test.des
						this.testName=testName
						// this.des=des
						this.evaluate=evaluate
						this.test_list=test.item
						let answerData=[]
						this.test_list.forEach((item)=>{
						    if(item.question_type != "部分说明"){
						        if (item.question_type == "单选矩阵") {
						            item.options.forEach(function (t, i) {
						                let questionItem = {
						                    question_id: item.id,
						                    hide: 0,
						                    question: item.question,
						                    sub_question: t,
						                    question_type: item.question_type,
						                    option: [],
						                    options_dimension: item.options_dimension[i],
						                    option_score: [],
						                    replenish: [],
						                    end_time: [],
						                    upload_time: ''
						                }
						                answerData.push(questionItem)
						            })
						        } else {
						            let questionItem = {
						                question_id: item.id,
						                hide: 0,
						                question: item.question,
						                sub_question: '-1',
						                question_type: item.question_type,
						                option: [],
						                options_dimension: item.options_dimension,
						                option_score: [],
						                replenish: [],
						                end_time: [],
						                upload_time: ''
						            }
						            answerData.push(questionItem)
						        }
						    }
						})
						this.answerData=answerData
						
						
					}
				})
			},
			nextqs(){
				if(!this.qlist[this.qIndex].ans){
					return this.$toast('请先做完本题！')
				}
				this.indexAc = ""
				if((this.qIndex+1)<this.qlist.length){
					this.qIndex+=1;
				}
			},
			timeEnd(){
				this.endTimeModel = true;
			},
			qreqs(){
				this.indexAc = ""
				if(this.qIndex>0){
					this.qIndex-=1;
				}
			},
			start() {
				this.preStart = false;
			},
			radioChange(event){
				
				this.indexAc = event.detail.value;
				this.qlist[this.qIndex].ans = this.qlist[this.qIndex].level[event.detail.value].content;
				this.qlist[this.qIndex].score = this.qlist[this.qIndex].level[event.detail.value].score;
				
				// let {id} = this.qlist[this.qIndex].level[event.detail.value]
				let {id,ans,score} = this.qlist[this.qIndex];
				this.answerData.forEach(item=>{
				    if(item.question_id==id){
				        if (item.option.length == 0) {
				            item.option.push(ans);
				        } else {
				            item.option = [];
				            item.option.push(ans)
				        }    
				        if (item.option_score.length == 0) {
				            item.option_score.push(score);
				        } else {
				            item.option_score = [];
				            item.option_score.push(score)
				        }                 
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.test-name {
		line-height: 34px;
		font-size: 18px;
		font-weight: 900;
		color: #333;
		text-align: center;
	}

	.info-title {
		height: 34px;
		line-height: 34px;
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	.info-content {
		line-height: 24px;
		text-indent: 2em;
		font-size: 14px;
		color: #666;
		margin-bottom: 30px;
	}

	.info-item {
		text-indent: 2em;
		line-height: 24px;
		font-size: 14px;
		color: #666;
	}

	.q-head {
		padding: 36rpx;
	}
	.qitem{
		height: 106rpx;
		line-height: 106rpx;
		border-radius: 26rpx;
		padding: 20rpx;
		margin-bottom: 25rpx;
	}
	.title{
		line-height: 72rpx;
		font-size: 38rpx;
		font-weight: 600;
	}
	.btnWrap{
		width: 320rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 46rpx;
	}
	.qitemAc{
		background-color: #e5f9f9;
	}
	.preBar{
		background-color: #326eff;height: 12rpx;border-radius: 6rpx;
	}
</style>